<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>View Rankings</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f7f7f7;
            margin: 0;
            padding: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            min-height: 100vh;
        }

        h1 {
            color: #333;
        }

        form, ul {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-top: 20px;
            width: 300px;
            box-sizing: border-box;
        }

        input, button {
            width: calc(100% - 22px); /* Adjust width considering padding and border */
            padding: 10px;
            margin-top: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            color: white;
            background-color: #007BFF;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }

        ul {
            list-style: none;
            padding: 0;
            margin-top: 20px;
        }

        li {
            padding: 8px;
            border-bottom: 1px solid #ccc;
            color: #333;
        }

        li:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
<h1>查看当前排名</h1>
<form>
    <input type="text" id="school" placeholder="输入学校名称">
    <input type="text" id="major" placeholder="专业名称">
    <button type="button" onclick="loadRankings()">查看排名</button>
</form>
<ul id="rankingsList"></ul>

<script>
    function loadRankings() {
        const school = document.getElementById('school').value;
        const major = document.getElementById('major').value;

        fetch(`http://localhost:8087/api/scores/rankings?school=${encodeURIComponent(school)}&major=${encodeURIComponent(major)}`)
            .then(response => response.json())
            // .then(scores => {
            //     const list = document.getElementById('rankingsList');
            //     list.innerHTML = ''; // Clear the list before adding new items
            //     scores.forEach((score, index) => {
            //         const li = document.createElement('li');
            //         li.textContent = `${index + 1}. ${score.name} - ${score.score}`;
            //         list.appendChild(li);
            //     });
            // })
            .then(scores => {
                console.log(scores); // 查看返回的数据
                const list = document.getElementById('rankingsList');
                list.innerHTML = ''; // 清空列表，确保不是显示问题
                scores.forEach((score, index) => {
                    const li = document.createElement('li');
                    li.textContent = `${index + 1}. ${score.name} - ${score.score}`;
                    list.appendChild(li);
                });
            })

                .catch(error => console.error('Error fetching rankings:', error));
    }
</script>
</body>
</html>
